<template>
  <div class="outSide cc-display">
    <div style="width: 60px; height: 60px" class="cc-display">
      <img
        src="/imgs/usertext/userexmple.png"
        style="width: 46px; height: 46px; border-radius: 23px"
      />
    </div>
    <div style="width: 100px; height: 60px">
      <div
        style="width: 100%; height: 50%; padding-left: 10px"
        class="sc-display border-none"
      >
        <span class="font16c moreinfo">{{ textinfo.name }}</span>
      </div>
      <div style="width: 100%; height: 50%" class="sc-display">
        <img
          src="/imgs/usertext/Icon-fire.png"
          style="height: 14px; width: 14px; margin: 0 10px"
        />
        <span class="font16e">{{ textinfo.order }}</span>
      </div>
    </div>
    <div style="width: 120px; height: 60px" class="cc-display">
      <button
        style="
          height: 36px;
          width: 100px;
          border-radius: 18px;
          border: none;
          background-color: #f5cf65;
        "
        class="font16f moreinfo"
      >
        了解详情
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserText",
  props: {
    textinfo: Object
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.outSide {
  width: 280px;
  height: 60px;
  border-radius: 30px;
  background-color: #eee;
}
</style>
